<template>
  <div class="layout-switch">
    <!-- 布局切换按钮 -->
    <el-dropdown @command="handleLayoutChange" trigger="click" placement="bottom-end">
      <el-button type="text" class="layout-btn" title="导航设置">
        <el-icon class="layout-icon">
          <Grid />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu class="layout-dropdown">
          <div class="layout-header">
            <span class="header-title">导航设置</span>
          </div>
          
          <!-- 布局模式选择 -->
          <div class="layout-section">
            <div class="section-title">布局模式</div>
            <div class="layout-grid">
              <div 
                v-for="layout in layoutConfigs" 
                :key="layout.mode"
                :class="['layout-item', { active: currentLayout === layout.mode }]"
                @click="handleLayoutChange(layout.mode)"
                :title="layout.description"
              >
                <div class="layout-preview">
                  <div :class="['preview-content', `preview-${layout.mode}`]">
                    <!-- 左侧模式预览 -->
                    <template v-if="layout.mode === 'sidebar'">
                      <div class="sidebar-preview-sidebar"></div>
                      <div class="sidebar-preview-main">
                        <div class="sidebar-preview-header"></div>
                        <div class="sidebar-preview-content"></div>
                      </div>
                    </template>

                    <!-- 顶部模式预览 -->
                    <template v-else-if="layout.mode === 'top'">
                      <div class="top-preview-header"></div>
                      <div class="top-preview-content"></div>
                    </template>

                    <!-- 混合模式预览 -->
                    <template v-else-if="layout.mode === 'mix'">
                      <div class="mix-preview-header"></div>
                      <div class="mix-preview-body">
                        <div class="mix-preview-sidebar"></div>
                        <div class="mix-preview-content"></div>
                      </div>
                    </template>
                  </div>
                </div>
                
                <div class="layout-info">
                  <div class="layout-name">{{ layout.name }}</div>
                  <div class="layout-check" v-if="currentLayout === layout.mode">
                    <el-icon>
                      <Check />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>



          <!-- 重置按钮 -->
          <div class="layout-footer">
            <el-button size="small" @click="handleReset">
              <el-icon><RefreshLeft /></el-icon>
              重置设置
            </el-button>
          </div>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Grid, Check, RefreshLeft } from '@element-plus/icons-vue'
import { useLayoutStore, LAYOUT_CONFIGS } from '@/stores/layout'
import { ElMessage } from 'element-plus'

// 布局状态管理
const layoutStore = useLayoutStore()

// 计算属性
const currentLayout = computed(() => layoutStore.layoutMode)
const layoutConfigs = computed(() => LAYOUT_CONFIGS)

// 方法
const handleLayoutChange = (layoutMode) => {
  try {
    layoutStore.setLayoutMode(layoutMode)
    const config = LAYOUT_CONFIGS.find(c => c.mode === layoutMode)
    ElMessage.success(`已切换到${config?.name || '未知布局'}`)
  } catch (error) {
    console.error('切换布局失败:', error)
    ElMessage.error('切换布局失败')
  }
}

const handleReset = () => {
  layoutStore.resetLayoutSettings()
  ElMessage.success('布局设置已重置')
}
</script>

<style scoped>
.layout-switch {
  display: inline-block;
}

.layout-btn {
  color: var(--theme-header-text-color) !important;
  padding: 8px !important;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.layout-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.layout-icon {
  font-size: 16px;
}

.layout-dropdown {
  width: 280px;
  padding: 0;
}

.layout-header {
  padding: 12px 16px;
  background: var(--theme-bg-secondary);
  border-bottom: 1px solid var(--theme-border-light);
}

.header-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-text-primary);
}

.layout-section {
  padding: 16px;
  border-bottom: 1px solid var(--theme-border-light);
}

.layout-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 12px;
  color: var(--theme-text-secondary);
  margin-bottom: 12px;
  font-weight: 500;
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.layout-item {
  cursor: pointer;
  border: 2px solid var(--theme-border-light);
  border-radius: 6px;
  padding: 8px;
  transition: all 0.3s ease;
  background: var(--theme-bg-primary);
}

.layout-item:hover {
  border-color: var(--theme-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.layout-item.active {
  border-color: var(--theme-primary);
  background: var(--theme-primary-light);
}

.layout-preview {
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #f5f5f5;
}

.preview-content {
  width: 100%;
  height: 100%;
  display: flex;
}

/* 左侧模式预览 */
.preview-sidebar {
  display: flex;
}

.sidebar-preview-sidebar {
  width: 30%;
  background: var(--theme-primary);
}

.sidebar-preview-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sidebar-preview-header {
  height: 30%;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.sidebar-preview-content {
  flex: 1;
  background: #fafafa;
}

/* 顶部模式预览 */
.preview-top {
  flex-direction: column;
}

.top-preview-header {
  height: 30%;
  background: var(--theme-primary);
}

.top-preview-content {
  flex: 1;
  background: #fafafa;
}

/* 混合模式预览 */
.preview-mix {
  flex-direction: column;
}

.mix-preview-header {
  height: 25%;
  background: var(--theme-primary);
}

.mix-preview-body {
  flex: 1;
  display: flex;
}

.mix-preview-sidebar {
  width: 25%;
  background: #e6f7ff;
}

.mix-preview-content {
  flex: 1;
  background: #fafafa;
}

.layout-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layout-name {
  font-size: 12px;
  color: var(--theme-text-regular);
  font-weight: 500;
}

.active .layout-name {
  color: #fff;
}

.layout-check {
  color: #fff;
  font-size: 14px;
}

.setting-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setting-label {
  font-size: 13px;
  color: var(--theme-text-regular);
}

.layout-footer {
  padding: 12px 16px;
  background: var(--theme-bg-secondary);
  text-align: center;
}
</style>
